<template>
    <!--个人信息侧边栏-->
    <v-navigation-drawer
            v-model="drawer"
            absolute
            fixed
            floating
            :mini-variant.sync="mini"
            class="v-navigation-drawer--fixed top-percent"
            permanent
    >
        <v-list-item>
            <v-list-item-avatar>
                <v-img :src="avatar"/>
            </v-list-item-avatar>

            <v-list-item-content>
                <v-list-item-title v-text="username"/>
            </v-list-item-content>
            <v-btn
                    icon
                    @click.stop="mini = !mini"
            >
                <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
        </v-list-item>

        <v-divider/>

        <v-list dense>

            <v-list-item
                    v-for="draw in leftDraw"
                    :key="draw.title"
                    @click="smAct(draw)"
                    link
            >
                <v-list-item-icon>
                    <v-icon>{{ draw.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                    <v-list-item-title>{{ draw.title }}</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
    export default {
        name: "userDrawer",
        data: () => ({
            //drawer
            drawer: null,
            leftDraw: [
                {title: '收藏', icon: 'mdi-heart-box-outline', name: "collection"},
                {title: '我的博客', icon: 'mdi-blogger', name: "myblog"},
                {title: '我点赞的', icon: 'mdi-thumb-up-outline', name: "admire"},
                {title: '个人中心', icon: ' mdi-account-outline', name: "personal"},
                {title: '退出', icon: 'mdi-exit-to-app', name: "exit"},
            ],
            mini: true,
            username: "",//登录用户名
            avatar: "",//登录用户头像
        }),
        methods: {
            /**
             * 初始化登录用户信息
             */
            initUser() {
                let username = this.$store.state.user.username;
                let avatar = this.$store.state.user.avatar;
                this.username = username === "" ? "路人小虾米" : username;
                this.avatar = avatar === "" ? "http://111.231.239.202:8018/data/img/unknownAvatar.png" : avatar;
            },
            /**
             * 侧边栏菜单所有点击事件
             * @param draw
             */
            smAct(draw) {
                let actName = draw.name;
                switch (actName) {
                    case "collection" :
                        this.$iziToast.warning({message: "博主时间有限，此功能仍在开发中..."});
                        break;
                    case "myblog" :
                        this.$iziToast.warning({message: "博主时间有限，此功能仍在开发中..."});
                        break;
                    case "admire" :
                        this.$iziToast.warning({message: "博主时间有限，此功能仍在开发中..."});
                        break;
                    case "personal" :
                        this.$iziToast.warning({message: "博主时间有限，此功能仍在开发中..."});
                        break;
                    case "exit" :
                        this.logout();
                        break;
                    default:
                        this.$iziToast.warning({message: "你选的啥？连我都不知道"});
                        break;
                }
            },
            /**
             * 登出
             */
            logout: function () {
                this.$axios.post("/api/oauth/loginOut", this.$qs.stringify({
                    access_token: this.$cookie.get("echo_access_token")
                })).then(res => {
                    let result = res.data;
                    if (result.code === 200) {
                        //跳转至首页
                        this.$goRoute("/parallax")
                    }
                });
                this.clearUser();
            },
            /**
             * 清除 cookie中的 用户信息
             */
            clearUser() {
                this.$cookie.delete('accessToken');
                this.$cookie.delete("echo_access_token");
                this.$cookie.delete("echo_refresh_token");
                this.$store.commit("clearStateData");
                this.$store.commit("resetTabMenu");
                this.$store.commit("resetBlogData");
                this.$store.commit("showLogin");
            }
        },
        created() {
            this.initUser();
        }
    }
</script>

<style scoped>

</style>